import styles from './style/face.module.css'
import { NavBar, Button,Toast } from 'react-vant'
import { useNavigate } from 'react-router-dom'
import { useEffect, useRef, useState } from 'react'
import axios from 'axios'
import { debounce } from 'lodash';
import { handleFace } from '../../utils/api'
const Face: React.FC = () => {
    let video = useRef<HTMLCanvasElement | null>();
    let canvas = useRef<HTMLCanvasElement | null>();
    const [imgSrc, setImgSrc] = useState(null)
    const navigate = useNavigate()
    // 1-利用视频的效果 捕捉最新的视频界面作为人脸库对比的照片
    //   打开摄像头的方法
    let open = () => {
        // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
        if (navigator.mediaDevices === undefined) {
            //如果该方法不存在   ourselves创建一个空对象
            navigator.mediaDevices = {};
        }
        // 标准的API  navigator对象是js的方法
        // navigator.mediaDevices.getUserMedia()：请求访问用户的媒体设备（如摄像头、麦克风），常用于视频通话或音频录制等场景。
        navigator.mediaDevices
            .getUserMedia({
                video: true, //访问的设备  访问的摄像头设备
                // audio:true,//访问麦克风设备
            })
            .then((stream) => {//授权通过 点允许
                console.log(stream); //可以检测到摄像头是否被占用
                // 摄像头开启成功
                video.current.srcObject = stream;//j将摄像头所录制的信息给video标签 这样video标签就可以看到所录制的内容
                video.current?.play(); //播放video视频  自动播放摄像头中录制的内容
            })
            .catch((err) => {//授权失败  点击拒绝
                // 摄像头打开失败
                console.log('摄像头打开失败，错误信息:', err);
                alert('摄像头打开失败');
            });
    };
    //   截取视频画面  和人脸库对比人员信息
    let drawMedia = debounce (async () => {
        //将video标签中最新一帧的画面图像截图下来 绘制到canvas画布上
        //获取到画布上下文对象
        
        const ctx = canvas.current?.getContext('2d');
        console.log(ctx,'ctx');
        
        // 清除画布  每次绘制之前都把之前的画布全部清除
        ctx?.clearRect(0, 0, canvas.current.width, canvas.current.height);//clearRect(前两个参数是清除画布的起点 后两个参数是清除的大小 )
        //绘制视频画面  把当前最新的视频画面作为图像绘制到canvas中
        // ctx?.drawImage(
        //     video.current, //要绘制的图像  video标签
        //     (canvas.current.width - canvas.current.width * (320 / 240)) / 2,
        //     0,
        //     canvas.current.width * (320 / 240),
        //     canvas.current.height,
        // );
        //图片转base64编码  canvas画布中只有一张图像   toDataURL()是canvas对象的一种方法，用于将canvas对象转换为base64位编码；
        const base64 = canvas.current.toDataURL('image/jpeg');
        //imgsrc 是一个变量  用于存放当前截取画面的base64
        setImgSrc(base64);
        if(  !imgSrc ) return;
        const params = {
            image: base64.split(',')[1],
        }
        let res = await handleFace(params)
        if( res.data.code ){
            Toast.success({
                message:res.data.message,
                duration:1000
            })
        }else{
            Toast.fail({
                message:res.data.message,
                duration:1000,
            })
        }
        //把base64编码发送到后端
        // const { data } = await axios.post('http://localhost:3000/faceLogin', {
        //     // data:image/jpeg;base64, 使用split截取去掉
        //     base64: base64.split(',')[1], //因为canvas转换出来的base64的字符串  逗号前面不需要 后边才是图像
        // });
        // const params = {
        //     image:base64.split(',')[1],
        //     name:"1001"
        // }
        // await handleFace(params)

        // 登录功能 写登录功能  在后边继续加逻辑
    },1000);

    useEffect(() => {
        setTimeout(()=>{
            open()
        },1000)
    }, [])
    return (
        <>
            <NavBar
                title="人脸登陆"
                onClickLeft={() => {
                    navigate('/login')
                }}
            />
            <div className={styles.face_icon}>
                {/* 在这里放置人脸识别图标或图像 */}
                <video
                    className={styles.video}
                    ref={video}
                    preload
                    autoplay
                    loop
                    muted
                    width="400"
                ></video>
                <canvas ref={canvas} className={styles.canvas}></canvas>
            </div>
            <Button type="primary" round block className={styles.btn} onClick={()=>{drawMedia()}}>完成</Button>
        </>
    )
}
export default Face